<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #drawing {
      width: 200px;
      height: 200px;
      background-color: aquamarine;
    }
  </style>  
</head>
<body>
  <canvas id="drawing">canvas 元素包裹的文本在不支持 canvas 的浏览器中会显示出来</canvas>

  <script>
    const drawing = document.querySelector('#drawing')

    // 确保浏览支持 canvas
    // drawing.getContext() 获取绘图上下文
    if (drawing.getContext) {
      const context = drawing.getContext('2d');

      // 使用 toDataURL 可以导出 canvas 上的图像
      const imgUrl = drawing.toDataURL('image/png')

      // 显示图片
      const img = document.createElement('img')
      img.src = imgUrl
      document.body.appendChild(img)
    }
  </script>
</body>
</html>